<template>
  <div class="vx-collection-list ui-fl">
    <ui-tabs :stretch="isStretch" class="tab-position" v-model="activeName" :active="active">
      <ui-tab-pane label="收款账户" v-if="leftType == 'singleTransferPre'" name="payerAcc">
        <payer-list @payeeInfo="leftInfo"></payer-list>
      </ui-tab-pane>
      <ui-tab-pane label="公益捐款收款名册" v-else-if="leftType == 'publicWelfarePre'" name="publicWelfarePre">
        <donat-list @payeeInfo="leftInfo"></donat-list>
      </ui-tab-pane>
      <ui-tab-pane :label="leftCustomName" :leftCustomName="leftCustomName" v-else-if="leftType == 'custom'">
        <pay-list @payerInfo="leftInfo"></pay-list>
      </ui-tab-pane>
      <ui-tab-pane :label="rightCustomName" v-if="showPayer">
        <pay-list @payerInfo="rightInfo"></pay-list>
      </ui-tab-pane>
    </ui-tabs>
  </div>
</template>
<script>
import payerList from './components/vx-payeelist';
import donatList from './components/vx-donatlist';
import payList from '@/components/vx-paylist';

export default {
  name: 'vx-collection-list',
  components: {
    payerList,
    donatList,
    payList,
  },
  props: {
    leftType: {
      // 左侧列表类型
      type: String,
      default: 'singleTransferPre',
      validator(leftType) {
        return ['singleTransferPre', 'custom', 'publicWelfarePre'].includes(leftType);
      },
    },
    leftCustomName: {
      // 左侧自定义名称
      type: String,
      default: '',
    },
    rightCustomName: {
      // 右侧侧自定义名称
      type: String,
      default: '付款账户',
    },
    isStretch: {
      type: Boolean,
      default: true,
    },
    showPayer: {
      type: Boolean,
      default: true,
    },
    active: {
      type: String,
      default: 'payerAcc',
    },
  },
  watch: {
    showPayer: {
      handler(val) {
        if (!val) {
          this.activeName = 'payerAcc';
        }
      },
    },
  },
  data() {
    return {
      activeName: this.active,
    };
  },
  methods: {
    leftInfo(item) {
      this.$emit('leftInfo', item);
    },
    rightInfo(item) {
      this.$emit('rightInfo', item);
    },
  },
};
</script>

<style lang="scss">
.vx-collection-list {
  width: 320px;
  height: 100%;
  background: rgb(247, 248, 251);
  border-radius: 4px;
  .ui-tabs__content {
    overflow: unset;
    height: calc(100% - 55px);
    .ui-tab-pane,
    .vx-payeelist,
    .vx-paylist,
    .vx-payeelist {
      height: 100%;
      display: flex;
      flex-direction: column;
      .payer-bankList-select {
        width: 290px;
        height: calc(100% - 40px);
      }
      .bankList-select {
        width: 290px;
      }
    }
  }
  .ui-tabs .ui-tabs__content {
    margin: 0;
  }
  .tab-position {
    box-sizing: border-box;
    height: 100%;
    padding: 15px;
  }

  .select-icon {
    color: #909399;
    font-size: 14px;
    margin: 10px 0;

    .tab-position {
      margin-bottom: 10px;
    }

    .select-icon {
      color: #909399;
      font-size: 14px;
      margin: 10px 0;

      span {
        cursor: pointer;
      }
    }

    .group-row {
      margin: 10px 0;
    }

    .btn-class {
      width: 25%;
      margin: 0 10px;
      padding: 10px auto;
    }
  }
  .noData {
    text-align: center;
    line-height: 60px;
    font-size: 16px;
  }
}
</style>
